<template>
  <div class="echartsDiv">
    <div class="titleDiv clearFloat">
      <div class="lf lineDiv"></div>
      <p class="lf titleP">关于企业</p>
    </div>
    <div class="showCharts" ref="titleAccuracyCharts"></div>

  </div>
</template>

<script>
/* eslint-disable */
import {queryAboutCompany} from '@/api/system/user'
export default {
  name: 'titleAccuracy',
  data() {
      return {
        datas:[
          {
            name: '重点排污企业课时完成率',
            value: 6
          },{
            name: '重点排污企业考试合格率',
            value: 16
          },{
            name: '其他企业课时完成率',
            value: 27
          },{
            name: '其他企业考试合格率',
            value: 92
          }]
      }
  },
  mounted() {
    this.getList()
  },
  methods:{
    getList() {
      queryAboutCompany().then(res=> {
          if(res.code==200) {
              this.datas[0].value = res.data[0].keyCompleteRate.replace("%","");
              this.datas[1].value = res.data[0].keyQualifiedRate.replace("%","");
              this.datas[2].value = res.data[0].otherCompleteRate.replace("%","");
              this.datas[3].value = res.data[0].otherQualifiedRate.replace("%","");
              this.initEchart()
          }
      })
    },
    initEchart(){
      let myChart = this.$echarts.init(this.$refs.titleAccuracyCharts);
      var data = this.datas
      var titleArr= [], seriesArr=[];
      var sCenter,TitleXy = {};
      var colors=[['#4496E2', '#A7D5FF'],['#FF6468', '#FFC4C6'],['#FF8400', '#FFD7AD'], ['#6ABB3E', '#C6EDB1'],['#4496E2', '#A7D5FF'],['#FF6468', '#FFC4C6']]
      data.forEach(function(item, index){
        sCenter = [index * 15 + 10 +'%', '40%']
        TitleXy = {
          left: index * 15 + 10 +'%',
          top: '70%'
        }

        titleArr.push(
          {
            text:item.name,
            left: TitleXy.left,
            top: TitleXy.top,
            textAlign: 'center',
            textStyle: {
              fontSize: '16',
              color: "#666",
              textAlign: 'center',
            },
          }
        );
        seriesArr.push(
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [35, 50],
            itemStyle:  {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              }
            },
            hoverAnimation: false,
            center: sCenter,
            data: [{
              value: item.value,
              label: {
                normal: {
                  formatter: function(params){
                    return params.value+'%';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '16',
                    fontWeight: 'bold',
                    color: "#666"
                  }
                }
              },
            }, {
              value: 100-item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          }
        )
      });
      let option = {
        backgroundColor: "#fff",
        title:titleArr,
        series: seriesArr
      }
      myChart.setOption(option);

      // 监听窗口变化 - 只刷新最后一个图表
      window.onresize = () => {
        myChart.resize();
      }
      // 监听窗口变化 - 多个图表同时刷新
      window.addEventListener('resize', () => {
        myChart.resize();
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .lf{
    float:left;
  }
  .rf{
    float:right;
  }
  .clearFloat:after{
    content:"";
    display:block;
    clear:both;
  }
  .echartsDiv{
    width:100%;
    height:100%;
    .titleDiv{
      width:100%;
      height:60px;
      padding:0 30px;
      box-sizing: border-box;
      border-bottom:1px solid #E5E5E5;
      p{
        margin:0;
      }
      /deep/ .ant-select-selection--single{
        height:40px;
        margin:10px 40px 0 0;
      }
      /deep/ .ant-select-selection__rendered{
        line-height:40px;
      }
      .lineDiv{
        width: 4px;
        height: 24px;
        background: #4496E2;
        margin:18px 20px 0 0;
      }
      .titleP{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height:60px;
      }
      .labelP{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        margin-right:18px;
        line-height:60px;
      }
      /deep/ .ant-btn{
        width: 100px;
        height: 40px;
        background: #4496E2;
        box-shadow: 1px 6px 12px 0 rgba(68, 150, 226, 0.2);
        border-radius: 4px;
        font-size: 16px;
        margin:10px 0 0 16px;
      }
    }
    .showCharts{
      width:100%;
      height:calc( 100% - 60px );
    }
  }
</style>